<template>
	<div class="item-wrap">
		<div class="avator-wrap">
			<img  v-if="iconType == 'image'" :src="setAvator(item)" @error="onLoadError" class="avator" :key="item.id">
			<icon-font v-else :type="iconType" class="icon" />
		</div>
		<div class="label">
			<div :title="label" :class="{'label-name' : true,'notmember' : item.type!=='Member'}" >{{ label }}</div>
			<div class="label-dept" v-if="item.type === 'Member'" :title="`${memberInfo}`"> {{ memberInfo }} </div>
		</div>
	</div>
</template>

<script>
import { entityFormat } from '@/utils/utils';

export default {
	props: ['item', 'itemLabelField'],
	inject: ['app'],
	data() {
		return {
		};
	},
	computed: {
		loginAccountId() {
			return this.app().orgSelect.loginAccountId;
		},
		label() {
			const orgSelect = this.app().orgSelect;
			return entityFormat(this.item, this.loginAccountId, orgSelect).name;
		},
		/*
		* 判断图片类型
		* */
		iconType: function () {
			let iType = '';
			switch (this.item.type) {
			case 'Member':
				iType = 'image';
				break;

			case 'WF_SUPER_NODE':
				iType = 'cap-icon-selected-supernode';
				break;

			case 'ExchangeAccount':
				iType = 'cap-icon-selected-external-unit';
				break;

			case 'Team':
			case 'OrgTeam':
				iType = 'cap-icon-selected-group';
				break;

			case 'Post':
			case 'Role':
			case 'doc':
				iType = 'cap-icon-selected-post';
				break;

			case 'Department':
				if (this.item.internal) {
					iType = 'cap-icon-selected-department';
				} else {
					iType = 'cap-icon-selected-external-unit';
				}
				break;

			case 'Account':
				iType = 'cap-icon-selected-company';
				break;
			case 'BusinessAccount':
				iType = 'cap-icon-selected-company';
				break;
			case 'BusinessDepartment':
				iType = 'cap-icon-selected-department';
				break;

			default:
				iType = 'cap-icon-selected-default';
			}
			return iType;
		},
		memberInfo() {
			let memberMsg = '';
			let itemNew = this.item;
			if (this.item.data && Object.keys(this.item.data).length) {
				itemNew = this.item.data;
			}
			if (itemNew.deptName && itemNew.postName) {
				memberMsg = itemNew.postName + '/' + itemNew.deptName;
			} else if (itemNew.deptName) {
				memberMsg = itemNew.deptName;
			}
			return memberMsg;
		}
	},
	methods: {
		onLoadError(e) {
			// 加载头像报错，使用默认头像
			const targetElemnt = e.target || e.srcElement;
			console.error('load avator error, ' + targetElemnt.getAttribute('src'));
			targetElemnt.setAttribute('src',_ctxPath + '/apps_res/v3xmain/images/personal/pic.gif');
		},
		setAvator(entityData) {
			if (entityData.avatarUrl) {
				return entityData.avatarUrl;
			}
			return _ctxPath + '/rest/orgMember/avatar/' + entityData.id;
		}
	},
	mounted() {
	}
};
</script>

<style scoped lang="scss">

.icon {
	font-size: 36px;
	font-style: normal;
	margin-left: -2px;
}

.item-wrap {
	height: 50px;
	display: flex;
	display: -ms-flexbox;
	align-items: center;
	-ms-flex-align: center;

	.avator-wrap {
		float: left;
		// height: 32px;
		width: 32px;
		// margin-top: 9px;

		.avator {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}


	.label {
		width: calc(100% - 42px);
		margin-left: 10px;
		float: left;

		.label-name {
			font-size: 14px;
			color: $defaultFontColor;
			line-height: 20px;
			width: 100%;
			padding-top: 5px;
			@include ellipsis();
			&.notmember{
				padding-top: 0;
			}
		}

		.label-dept {
			font-size: 12px;
			color: $postDefalutFontColor;
			line-height: 20px;
			display: inline-block;
			width: 100%;
			@include ellipsis();
		}
	}
}

</style>
